import { markRaw } from 'vue';
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'; // createWebHashHistory, createWebHistory
import type { Router, RouteRecordRaw, RouteComponent } from 'vue-router';
import { Help as IconHelp } from '@element-plus/icons-vue';

/* Layout */
const Layout = ():RouteComponent => import('@/layout/index.vue');

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 *
 * 注意：hidden、alwaysShow 属性配置移动到了meta中！！！
 */
export const constantRoutes:RouteRecordRaw[] = [
    {
        path: '/redirect',
        component: Layout,
        meta: { hidden: true },
        children: [
            {
                path: '/redirect/:path(.*)',
                component: () => import('@/views/redirect/index.vue')
            }
        ]
    },
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        meta: { hidden: true }
    },
    {
        path: '/404',
        component: () => import('@/views/error-page/404.vue'),
        meta: { hidden: true }
    },
    {
        path: '/401',
        component: () => import('@/views/error-page/401.vue'),
        meta: { hidden: true }
    },
    {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        children: [
            {
                path: 'dashboard',
                component: () => import('@/c1.vue'),
                name: 'main',
                meta: { title: '主页面 Main' , icon: 'table'}
            },
        ]
    },
    {
        path: '/c2',
        component: Layout,
        children: [
            {
                path: '/todo',
                component: () => import('@/c2.vue'),
                name: 'todo',
                meta: { title: '人员监管页面 Todo' , icon: 'tree'}
            },
        ]
    },
    {
        path: '/c3b',
        component: Layout,
        meta: { hidden: true },
        children: [
            {
                path: '/chain-view/:cid',
                component: () => import('@/c3b.vue'),
                name: 'chain-view',
                meta: { title: 'Todo Chain审计编辑页面' , icon: 'tree'}
            },
        ]
    },
    {
        path: '/c3',
        component: Layout,
        meta: { hidden: true },
        children: [
            {
                path: '/chain-edit/:cid',
                component: () => import('@/c3.vue'),
                name: 'chain-edit',
                meta: { title: 'Todo Chain审计编辑页面' , icon: 'tree'}
            },
        ]
    }
];

/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes:RouteRecordRaw[] = [
    // 404 page must be placed at the end !!!
    { path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true }}
];

console.log('BASE_URL=', import.meta.env);

const createTheRouter = ():Router => createRouter({
    // history: createWebHashHistory(import.meta.env.BASE_URL),
    // 注意，如果要配置 HTML5 模式，则需要修改nginx配置，参考资料：
    // https://router.vuejs.org/zh/guide/essentials/history-mode.html
    //history: createWebHistory(import.meta.env.BASE_URL),
    history: createWebHashHistory(),
    scrollBehavior: () => ({ top: 0 }),
    routes: constantRoutes
});

interface RouterPro extends Router {
    matcher: unknown;
}

const router = createTheRouter() as RouterPro;

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
    const newRouter = createTheRouter() as RouterPro;
    router.matcher = newRouter.matcher; // reset router
}

export default router;
